import React, { PureComponent } from 'react';
import { Modal, Form, Row, Input, Select, Spin, Switch } from 'antd';
// import { connect } from 'dva';
import lodash from 'lodash';
// import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { getPermissionModel } from '../../services/manage-by-permission-controller';
import { ResourcesTypeArray } from '../../utils/enum';
// import classNames from 'classnames';
import styles from './PermissionManageUpdate.less';

@Form.create()
export default class PermissionManageUpdate extends PureComponent {

  onCreate = () => {
    const { form, onOk, permissionData } = this.props;
    if (!(onOk instanceof Function)) return;
    form.validateFields({ force: true }, (err, formValues) => {
      if (err) return;
      const data = formValues;
      if (data.needAuthorization) {
        data.needAuthorization = 1;
      } else {
        data.needAuthorization = 2;
      }
      onOk(permissionData.permissionStr, data);
    });
  }

  render() {
    const { permissionData, sysNameList, saveForm, queryLoading, visible, confirmLoading, onCancel, form } = this.props;
    const { getFieldDecorator, getFieldValue } = form;
    if (saveForm instanceof Function) saveForm(form);
    const width = 200;
    return (
      <Modal
        width={670}
        visible={visible}
        confirmLoading={confirmLoading}
        title="更新权限"
        okText="保存"
        onCancel={onCancel}
        onOk={this.onCreate}
        maskClosable={false}
        bodyStyle={{ padding: '24px 24px 0 24px' }}
      >
        <Spin delay={100} spinning={queryLoading}>
          <Form layout="inline" className={styles.form}>
            <Row gutter={{ md: 0, lg: 0, xl: 0 }}>
              <Form.Item label="所属系统" hasFeedback>
                {getFieldDecorator('sysName', {
                  initialValue: permissionData ? permissionData.sysName : undefined,
                  validateFirst: true,
                  rules: [
                    { required: true, whitespace: true, message: '所属系统不能为空' },
                  ],
                })(
                  <Select placeholder="所属系统" allowClear={true} style={{ width }} disabled>
                    {sysNameList.map(sysName => (<Select.Option key={sysName} value={sysName}>{sysName}</Select.Option>))}
                  </Select>
                )}
              </Form.Item>
              <Form.Item label="权限标题" hasFeedback>
                {getFieldDecorator('title', {
                  initialValue: permissionData ? permissionData.title : undefined,
                  validateFirst: true,
                  rules: [
                    { required: true, whitespace: true, message: '权限标题不能为空' },
                  ],
                })(
                  <Input placeholder="格式：[模块名称]-功能名称" style={{ width }} />
                )}
              </Form.Item>
            </Row>
            <Row gutter={{ md: 0, lg: 0, xl: 0 }}>
              <Form.Item label="权限类型" hasFeedback>
                {getFieldDecorator('resourcesType', {
                  initialValue: permissionData ? `${permissionData.resourcesType}` : undefined,
                  validateFirst: true,
                  rules: [
                    { required: true, whitespace: true, message: '权限类型不能为空' },
                  ],
                })(
                  <Select placeholder="权限类型" allowClear={true} style={{ width }}>
                    {ResourcesTypeArray.map(item => (<Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>))}
                  </Select>
                )}
              </Form.Item>
              <Form.Item label="权限标识" hasFeedback>
                {getFieldDecorator('permissionStr', {
                  initialValue: permissionData ? permissionData.permissionStr : undefined,
                  validateFirst: true,
                  rules: [
                    {
                      validator(_, value, callback) {
                        const errors = [];
                        if (!value) {
                          callback(errors);
                          return;
                        }
                        if (value.length !== lodash.trim(value).length) {
                          errors.push("权限标识不能有空字符");
                          callback(errors);
                          return;
                        }
                        const resourcesType = getFieldValue('resourcesType');
                        if (lodash.trim(value) === '' || (`${resourcesType}` === `${permissionData.resourcesType}` && value === permissionData.permissionStr)) {
                          callback(errors);
                          return;
                        }
                        if (lodash.startsWith(value, '[auto]')) {
                          errors.push("权限标识不能以“[auto]”开始");
                          callback(errors);
                          return;
                        }
                        if (lodash.trim(value).length < 6) {
                          errors.push("权限标识至少需要6个字符长");
                          callback(errors);
                          return;
                        }
                        getPermissionModel(lodash.trim(value)).then(result => {
                          if (result) {
                            errors.push("权限标识已经存在");
                          }
                          callback(errors);
                        });
                      },
                    },
                  ],
                })(
                  <Input placeholder="格式：xxx-xxx-xxx-..." style={{ width }} />
                )}
              </Form.Item>
            </Row>
            {(permissionData && permissionData.resourcesType !== 1) ? '' : (
              <Row gutter={{ md: 0, lg: 0, xl: 0 }}>
                <Form.Item label="开启授权">
                  {getFieldDecorator('needAuthorization', {
                    valuePropName: 'checked',
                    initialValue: permissionData ? permissionData.needAuthorization === 1 : 1,
                  })(
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                  )}
                </Form.Item>
              </Row>
            )}
            <Row gutter={{ md: 0, lg: 0, xl: 0 }}>
              <Form.Item label="说明">
                {getFieldDecorator('description', {
                  initialValue: permissionData ? permissionData.description : undefined,
                  rules: [
                    { required: false, max: 127, message: '说明长度不能超过127个字符' },
                  ],
                })(
                  <Input.TextArea placeholder="说明" rows={3} autosize={{ minRows: 3, maxRows: 6 }} style={{ width: 505, maxWidth: 1000 }} />
                )}
              </Form.Item>
            </Row>
          </Form>
        </Spin>
      </Modal>
    );
  }
}
